<template>
  <div v-if="data">
    <div v-for="{ id, detail_title, detail_message } in data" :key="id">
      <div class="center">
        <div class="title">{{ detail_title }}</div>
        <hr />
        <div class="message" v-html="detail_message">{{ detail_message }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      //console.log("this:", this); // 查看, 能否找到axios

      const url = `detail?lid=${this.$route.query.lid}`;

      // 全局axios, 存储在vue对象的原型, 所以用 this.axios
      this.axios.get(url).then((res) => {
        console.log(res);
        this.data = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.center {
  width: 1300px;
  margin: 0 auto;
}
.title {
  font-size: 40px;
  margin: 30px;
  font-weight: 500;
}
.message {
  display: flex;
  flex-direction: column;
  font-size: 20px;
  > ::v-deep span {
    display: block;
    margin: 20px;
  }
}
</style>
